<template>
	<view class="progress-back">
		<view class="progress-bar"></view>
	</view>
</template>

<script>
	
</script>

<style>
	.progress-back{
		position: relative;
		border-radius: 15rpx;
		width: 200rpx;
		height: 20rpx;
		background-color: #eee;
		transform: translateY(-34%);
	}
	.progress-bar{
		content: '';
		position: relative;
		z-index: 1;
		display: block;
		border-radius: 15rpx;
		height: 20rpx;
		width: 10%;
		background-image: linear-gradient(0deg, #ff7a3b, #ffc107);
		box-shadow: 0 1px 2px 0 #ff7a3ba3;
		filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.2));
		transition: all 0.2s ease;
	}
	/* .progress-bar {
	  position: relative;
	  border-radius: 15rpx;
	  width: 200rpx;
	  height: 20rpx;
	  background-color: #eee;
	  transform: translateY(-34%);
	}
	.progress-bar::before {
	  content: '';
	  position: relative;
	  z-index: 1;
	  display: block;
	  border-radius: 15rpx;
	  height: 20rpx;
	  width: 10%;
	  background-image: linear-gradient(0deg, #ff7a3b, #ffc107);
	  box-shadow: 0 1px 2px 0 #ff7a3ba3;
	  filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.2));
	  transition: all 0.2s ease;
	}
	.progress-bar::after {
	  content: '10%';
	  position: absolute;
	  left: 50%;
	  transform: scale(0.9) translate(-50%, 20%);
	  font-size: 12px;  
	  font-weight: bold;
	  color: #f79d12;
	}
	.progress-bar:active::before {
	  width: 100%;
	}
	.progress-bar:active::after {
	  content: '100%';
	} */
	.progress-bar {
		animation: progress-stripes 1s linear infinite;
	}
	
	@keyframes progress-stripes {
		0% {
			width: 0%;
		}
	
		100% {
			/* content: '100%'; */
			width: 100%;
		}
	}
</style>